<template>
  <div class="home">

  <div class="find-main">

  <!-- 中间主要内容部分 -->
  <div class="findBox">
    <div class="title">
      <ul  ref="title">
        <li style="font-weight: 700;" @click="animation('sp',$event)">视频</li>
        <li @click="animation('mv',$event)">MV</li>
        <div class="dh" :style="{left:dh+'px',width:dhWidth+'px',transition: miao, }"></div>
      </ul>
    </div>
    <div class="findcontent">
        <div class="title-NewMusic">
        <ul>
            <ul class="right-title" v-show="isShow == 1">
                <li><span>收藏全部</span><span class="iconfont">&#xe727;</span></li>
            </ul>
            <div style="find-right-title">
                <li v-for="(items,index) in NewMusicList" @click="NewMusic = items" :key="index">
                <span :class="{NewMusic:NewMusic == items}">{{items}}</span>
            </li> 
            </div> 
        </ul>
      </div>
       <div class="recommMv" v-show="showPag=='sp'">
        <SlotRecommMV2 :data="listData2"></SlotRecommMV2>
    </div>
       <div class="recommMv" v-show="showPag=='mv'">
        <SlotRecommMV2 :data="listData3"></SlotRecommMV2>
    </div>
    </div>
  </div>
  </div>
  </div>
</template>

<script>

import Titles from '@/components/title.vue'
import SlotRecommMV2 from '@/components/slotRecommMV2.vue'
import api from '../utils/api'
import Services from '../utils/Service'
export default {
  name: 'HomeView',
  data() {
    return {
      dh:2,
      dhWidth:36,
      miao:'left 0.2s linear',
      NewMusicList:['全部','华语','欧美','韩国','日本'],
      NewMusic:'全部',
           isShow:1,
           NewMusicR:1,
           showPag:'sp',
           listData2:[],
           listData3:[]
    }
  },

  components: {
    Titles,SlotRecommMV2
  },
  created() {
    
  },
  mounted() {
    this.mvAll()
  },
  methods: {
                 async mvAll(){
      let res = await Services(api.mvAll);

      if(res.status == 200&&res.data.code==200){
let getData= [...res.data.data]
         console.log(getData)

      this.listData2 = getData.map(function(item,index){
      return {
                
                type:'LeftSP',
                id:getData[index].id,
                name:getData[index].name,
                artistName:getData[index].artistName,
                index:'',
                "cover":getData[index].cover,
                artistId:getData[index].artistId,
                playCount:getData[index].playCount
      }
    })
    console.log(this.listData2)
      }else{
        console.log(res)
      }
    },
    animation(target,e){
      
     this.$nextTick(function () {// 调用$nextTick函数

    //e.target.innerHTML获取当前元素值
    //this.$refs.title.childNodes[0].offsetLeft// 获取dom子元素到父元素的距离
    for (let index = 0; index < this.$refs.title.childNodes.length; index++) {
      const element = this.$refs.title.childNodes[index].innerHTML;
        this.$refs.title.childNodes[index].style.fontWeight = 200;
      if(element == e.target.innerHTML  ){
                  this.showPag = target;  
                  console.log(this.showPag)   
                  var str =element;
                  // console.log(this.dh)
                  // console.log(this.$refs.title.childNodes[index].offsetLeft)
          var len = 0;
          //遍历字符串，以字符的Unicode编码识别中文
         this.dhWidth = 36;
          for(var key in str)
          {
          //中文字符在Unicode编码中占据 0x4E00~0x9FBF 字段
          if( (str.charCodeAt(key) >= 0x4E00) && (str.charCodeAt(key) <= 0x9FBF) )
          {
          len += 2;
          }
          else
          {
          len ++;
          }
          }
          this.dh =this.$refs.title.childNodes[index].offsetLeft+2
          // console.log(this.dhWidth)
          this.dhWidth = this.dhWidth*(len/4)
          // console.log(this.$refs.title.childNodes[index])
          this.$refs.title.childNodes[index].style.fontWeight = 700;
         
          
          
          
          
          
      }
    }
    
	})
    }
   
  }
}
</script>
<style lang="less">
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
    div,span,ul,li,img{
    font-size: 0;
}
.find-main{
     width: 100%;
//   display: flex;

.findBox{
//   max-width: 84%;
min-width: 82%;
  // border: solid #666666 1px;
//   margin: 25px 0 0 72px;
  position: relative;
   .title>ul{
    display: flex;
    font-weight: 200;
    // li>a{
    //    .font23();
    //     margin-left: 35px;
    // }
    li{
       .font21px();
    }
    li:not(:first-child){
        margin-left: 35px;
    }
    
    .dh{
    width: 36px;
    height:3.5px;
    background: #EC4141;
    position: absolute;
    top: 32px;
    
}
  }
  .findcontent{
    margin-top: 22px;
    // border: 1px solid palevioletred;
    .title-NewMusic{
   margin-bottom: 25px;
  
    .NewMusic{
        font-weight: 800;
    }
    ul{
        display: flex;
        position: relative;
        div{
             display: flex;
             position: absolute !important;
            right: 0px !important;
        li{
                    margin-right: 30px;
               
                    span{
                    font-size: 18px;
                    color: #676767;
                    cursor: pointer;
                }
                }
        }
      
        .right-title{
           
            
             li:first-child{
                margin-left: 4px;
                
                border:solid 1px  #373737;
                span{
                    color: #373737;
                }
            }
            li{
                  padding: 4px 16px;
             
            margin-right: 15px;
            border-radius: 17px;
            span{
                color: white;
                font-size: 16px;
            }
           
            span:nth-child(2){
                margin-left: 4px;
              
            }
            }
        }
     
        
    }
}
  }
}
   }
 
.iconStyleRIght{
  font-size: .119792rem /* 23/192 */;
  color: #313131;
 
}
.iconStyleLeft{
  font-size: .098958rem /* 19/192 */;
  color: #313131;
}
.font23{
  font-size: .119792rem /* 23/192 */;
}
.font23Px{
   font-size:23px;
}
.font23(){
  font-size: .119792rem /* 23/192 */;
}
.font21px(){
  font-size:21px;
}
.marginRight{
  margin-right:.072917rem /* 14/192 */;
}
.floatRight{
  float: right;
}
.jia{
  color: #666666;
  margin-right: .104167rem /* 20/192 */;
  font-weight: inherit;
}

</style>